<template>
    <div class="conn">
        <el-form ref="form" label-position="left" status-icon :rules="rules" :model="form" label-width="100px">
            <div>
                <el-form-item label="病历号:" prop="caseNumber">
                    <el-input v-model.number="form.caseNumber"></el-input>
                </el-form-item>

            </div>
            <div>
                <el-form-item label="预约日期:" prop="visitDate">
                    <el-date-picker
                            v-model="form.visitDate"
                            align="right"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="时间段:" required>
                    <el-time-select
                            placeholder="起始时间"
                            v-model="startTime"
                            :picker-options="{
                              start: '08:30',
                              step: '00:15',
                              end: '18:30'
                            }">
                    </el-time-select>
                    &nbsp;<span class="h">—</span>
                    <el-time-select
                            @change="setNoon"
                            placeholder="结束时间"
                            v-model="endTime"
                            :picker-options="{
                              start: '08:30',
                              step: '00:15',
                              end: '18:30',
                              minTime: startTime
                            }">
                    </el-time-select>
                </el-form-item>
            </div>

            <div>
                <el-form-item label="挂号级别:" prop="registLeID">
                    <el-select v-model="form.registLeID" placeholder="请选择">
                        <el-option v-for="(item,index) of types" :key="index" :label="item.val"
                                   :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="挂号科室:" prop="deptID">
                    <el-select v-model="form.deptID" filterable placeholder="请选择科室" @change="query">
                        <el-option v-for="(item,index) of options2" :key="index" :label="item.deptName"
                                   :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="reduce" prop="CodeName">
                    <el-select v-model="form.CodeName" placeholder="请选择医生">
                        <el-option v-for="(item,index) of form.CodeNmaes" :key="index" :label="item"
                                   :value="item"></el-option>
                    </el-select>
                </el-form-item>
            </div>

            <el-divider></el-divider>


            <div>
                <el-form-item label="姓名:" prop="realName">
                    <el-input v-model="form.realName"></el-input>
                </el-form-item>
                <el-form-item label="性别:" prop="gender">
                    <el-select v-model="form.gender" placeholder="请选择">
                        <el-option v-for="(item,index) of genders" :key="index" :label="item.val"
                                   :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出生日期:" prop="birthDate">
                    <el-date-picker @change="cons"
                            v-model="form.birthDate"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </div>
            <div>

                <el-form-item label="身份证号:" prop="IDnumber">
                    <el-input v-model="form.IDnumber"></el-input>
                </el-form-item>


                <el-form-item label="结算类别:" prop="settleID">
                    <el-select v-model="form.settleID" placeholder="请选择">
                        <el-option v-for="(item,index) of levels" :key="index" :label="item.val"
                                   :value="item.code"></el-option>
                    </el-select>
                </el-form-item>

            </div>
            <div>
                <el-form-item label="年龄:" prop="age">
                    <el-input v-model.number="form.age"></el-input>
                </el-form-item>
                <select class="selectBox" v-model="form.ageType">
                    <option value="岁">岁</option>
                    <option value="月" >月</option>
                    <option value="天" >天</option>

                </select>
            </div>
            <div>
                <el-form-item label="地址:" prop="homeAddress">
                    <el-input class="incr" v-model.number="form.homeAddress"></el-input>
                </el-form-item>
            </div>

            <el-form-item label="">
                <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {HOST} from "../../config/HOST"
    export default {
        name: "register",
        data() {
            return {
                visitstate:1,
                registerid:'',
                startTime: '08:30',
                endTime: '08:30',
                form: {
                    isBook:'1',//是否要病历本（默认要）
                    ageType:'岁',//年龄类别
                    noon:'',//午别
                    noonCode:1,
                    visitState:1,//看诊状态
                    registerID:'10001',//挂号员ID
                    registTime:new Date(),//挂号时间
                    registLeID: '',//挂号级别
                    deptID: '',//挂号科室
                    userID: '',//医生代码
                    caseNumber: '',//病历号
                    visitDate: new Date(),//挂号日期
                    data: {
                        code: [1, 2, 3],
                        name: ['a', 'b', 'c']
                    },
                    CodeNmaes: [],
                    CodeName: '',
                    birthDate: new Date(),
                    realName: '',
                    age: '',
                    IDnumber: '',
                    gender: '',
                    homeAddress: '',
                    settleID: '',
                },
                types:[
                    {
                        code:1,
                        val:'普通'
                    },
                    {
                        code:2,
                        val:'专家'
                    }
                ],
                levels:[
                    {
                        code:1,
                        val:'自费'
                    },
                    {
                        code:2,
                        val:'市医保'
                    }
                ],
                genders:[
                    {
                        code:71,
                        val:'男'
                    },
                    {
                        code:72,
                        val:'女'
                    }
                ],
                //科室的名称下拉框选项
                options2: [
                    {
                        ID: 1,
                        deptName: '妇产科'
                    },
                    {
                        ID: 2,
                        deptName: '牙科'
                    },
                    {
                        ID: 3,
                        deptName: '泌尿科'
                    }],
                rules: {
                    visitDate: [
                        {required: true, message: '请选择挂号科室', trigger: 'change'}
                    ],
                    settleID: [
                        {required: true, message: '请选择结算类别', trigger: 'change'}
                    ],
                    deptID: [
                        {required: true, message: '请选择挂号科室', trigger: 'change'}
                    ],
                    gender: [
                        {required: true, message: '请选择性别', trigger: 'change'}
                    ],
                    birthDate: [
                        {required: true, message: '请填写', trigger: 'change'}
                    ],
                    registLeID: [
                        {required: true, message: '请选择挂号级别', trigger: 'change'}
                    ],
                    CodeName: [
                        {required: true, message: '请选择看诊医生', trigger: 'change'}
                    ],
                    homeAddress:[
                        {required: true, message: '请填写具体地址', trigger: 'blur'}
                    ],
                    realName:[
                        {required: true, message: '请填写姓名', trigger: 'blur'}
                    ],
                    IDnumber: [
                        {required: true, message: '请填写身份证号', trigger: 'blur'},
                        { pattern:/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,message: '请正确填写！',trigger: 'blur' }
                    ],
                    caseNumber: [
                        {
                            required: true, message: '请输入病例号', trigger: 'blur'
                        },
                        {
                            type: 'number', message: '必须为数字'
                        }
                    ],
                    age: [
                        {
                            required: true, message: '请输入年龄', trigger: 'blur'
                        },
                        {
                            type: 'number', message: '必须为数字'
                        }
                    ]
                }
            }
        },
        created() {
            this.$ajax.get(`${HOST}dept/all`).then((res)=>{
                this.options2=res.data
            })

        },
        computed: {},
        watch: {
            'form.CodeName'() {
                let code = this.form.CodeName.split("-")[0];
                this.form.userID = code;
                // eslint-disable-next-line no-console
                console.log(this.form.userID)
            },
            'form.reglevlNames'(){
                this.form.reglevlName=this.form.reglevlNames[0]+this.form.reglevlNames[1]
            },
            'form.noon'(){
                if(this.form.noon=='上午') this.form.noonCode=1
                else  this.form.noonCode=2
            }
        },
        methods: {
            query(){
                this.setNoon()
                let doc = this.form;
                doc.CodeName=''
                let week=this.form.visitDate.getDay();
                this.$ajax.get(`${HOST}schedul/query?week=${week+this.form.noonCode}&deptId=${this.form.deptID}`).then((res)=>{
                    doc.CodeNmaes=[]
                    console.log(res)
                    for (let i = 0; i < res.data.length; i++) {
                        doc.CodeNmaes[i] = res.data[i].userId + "-" + res.data[i].userName;
                    }
                })
            },
            cons(){
                //一天毫秒数：86400000
                //一月毫秒数：2592000000
                //一年毫秒数：31104000000
                let d=this.form.birthDate
                let da=new Date()
                let data=da-d;
                if(data<=0){
                    this.$message("请正确填写！！")
                    this.form.age=''
                }else{
                    if(data/31104000000>1){
                        this.form.age=Math.floor(data/31104000000)
                        this.form.ageType='岁'
                    }else{
                        if(data/2592000000>1){
                            this.form.age=Math.floor(data/2592000000)
                            this.form.ageType='月'
                        }else{
                            this.form.age=Math.floor(data/86400000)
                            this.form.ageType='天'
                        }
                    }
                }
            },
            submitForm(formName) {
                this.setNoon()
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                       this.$ajax.post("http://localhost:8082/add",this.form).then((res)=>{
                           // eslint-disable-next-line no-console
                           console.log(res)
                           this.$message({
                               type:"success",
                               message:"添加成功"
                           })
                       })
                    } else {
                        this.$message({
                            type:"error",
                            message:"添加失败"
                        })
                        return false;
                    }
                });
            },
            setNoon(){
                let t=this.endTime;
                let f=parseInt(t.split(":")[0]);
                if(f>12) this.form.noon="下午"
                else this.form.noon="上午"
            }
        }
    }
</script>

<style scoped>
    img {
        width: 100px;
    }

    .el-form-item {
        display: inline-block;
    }

    .el-form-item:nth-of-type(2), .el-form-item:nth-of-type(3) {
        margin-left: 20px;
    }
    .h{
        display: inline-block;
        text-align: center;
        padding-right: 10px;
        color: #DCDFE6;
    }
    .conn {
        padding: 20px 100px;
    }

    .reduce {
        margin-left: 0 !important;
        position: relative;
        left: -67px;
    }
    .selectBox{
        height: 40px;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        position: relative;
        right: 39px;
    }

    .incr {
        width: 630px;
    }
</style>